import { Card, Button, Modal, Form, Input, Upload, DatePicker, message } from 'antd'
import { PlusOutlined, UploadOutlined, TrophyOutlined } from '@ant-design/icons'
import { useState } from 'react'

const { TextArea } = Input
const { RangePicker } = DatePicker

export default function Honors() {
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [form] = Form.useForm()

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleCancel = () => {
    setIsModalVisible(false)
    form.resetFields()
  }

  const handleOk = async (values: any) => {
    try {
      // TODO: 实现添加荣誉逻辑
      console.log('添加荣誉:', values)
      message.success('荣誉添加成功')
      setIsModalVisible(false)
      form.resetFields()
    } catch (error) {
      message.error('添加荣誉失败')
    }
  }

  const uploadProps = {
    name: 'image',
    action: '/api/upload',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`)
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`)
      }
    },
  }

  const mockHonors = [
    {
      id: 1,
      title: '学术成就奖',
      description: '在学术研究方面取得重要成就',
      type: 'achievement',
      date: '2024-01-15',
      member: '张三'
    },
    {
      id: 2,
      title: '社会贡献奖',
      description: '为社会公益事业做出重要贡献',
      type: 'award',
      date: '2024-02-20',
      member: '李四'
    }
  ]

  return (
    <div>
      <Card
        title="荣誉管理"
        extra={
          <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>
            添加荣誉
          </Button>
        }
        style={{ marginBottom: 16 }}
      >
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '16px' }}>
          {mockHonors.map((honor) => (
            <Card key={honor.id} hoverable>
              <div style={{ textAlign: 'center', marginBottom: 16 }}>
                <TrophyOutlined style={{ fontSize: 48, color: '#f59e0b' }} />
              </div>
              <h3 style={{ textAlign: 'center', marginBottom: 8 }}>{honor.title}</h3>
              <p style={{ color: '#666', marginBottom: 8 }}>{honor.description}</p>
              <p style={{ color: '#999', fontSize: '12px', marginBottom: 4 }}>
                获得者: {honor.member}
              </p>
              <p style={{ color: '#999', fontSize: '12px' }}>
                获得时间: {honor.date}
              </p>
            </Card>
          ))}
        </div>
      </Card>

      <Modal
        title="添加荣誉"
        open={isModalVisible}
        onOk={form.submit}
        onCancel={handleCancel}
        width={600}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleOk}
        >
          <Form.Item
            name="title"
            label="荣誉标题"
            rules={[{ required: true, message: '请输入荣誉标题' }]}
          >
            <Input placeholder="请输入荣誉标题" />
          </Form.Item>

          <Form.Item
            name="description"
            label="荣誉描述"
            rules={[{ required: true, message: '请输入荣誉描述' }]}
          >
            <TextArea rows={3} placeholder="请输入荣誉描述" />
          </Form.Item>

          <Form.Item
            name="member"
            label="获得者"
            rules={[{ required: true, message: '请输入获得者姓名' }]}
          >
            <Input placeholder="请输入获得者姓名" />
          </Form.Item>

          <Form.Item
            name="honor_type"
            label="荣誉类型"
            rules={[{ required: true, message: '请选择荣誉类型' }]}
          >
            <Input placeholder="请选择荣誉类型（成就/奖励/表彰）" />
          </Form.Item>

          <Form.Item
            name="date_received"
            label="获得时间"
          >
            <DatePicker style={{ width: '100%' }} placeholder="请选择获得时间" />
          </Form.Item>

          <Form.Item
            name="image"
            label="相关图片"
          >
            <Upload {...uploadProps}>
              <Button icon={<UploadOutlined />}>上传图片</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}